<template>
  <el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px" class="demo-ruleForm login-container">
    <h3 class="title">元通汽车金融管理系统</h3>
    <el-form-item prop="username">
      <el-input type="text" v-model="account.username" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="pwd">
      <el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:100%;" @click.native.prevent="handleLogin" :loading="logining">登录</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
//import NProgress from 'nprogress'
import $ from 'jquery'
export default {
  data() {
    return {
      allowedRoleList:'',
      logining: false,
      account: {
        username: '',
        pwd: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      },
      checked: true
    };
  },
  mounted(){
    this.getAllowedRoleList()
    
  },
  methods: {
    getMenuList(){
      let that = this
      var temp = []
      this.$http.get("/user/detail")
      .then((response)=>{
        this.$store.state.menuList=response.data.data.funcList
        $.each(response.data.data.funcList,function(index,value){
          temp.push(value.funcDesc)
        })
        sessionStorage.setItem('menuList', temp.toString())
        this.$router.push({ path: '/'})
      })
      .catch((error)=>{
        console.log(error)
      })
    },

    getAllowedRoleList(){
      this.$http.get('/accessAllowedRole/list')
      .then((response)=>{
        this.allowedRoleList = response.data
      })
      .catch((error)=>{
        console.log(error)
      })
    },
    handleLogin() {
      let that = this
      this.$refs.AccountFrom.validate((valid) => {
        if (valid) {
          this.logining = true;
          var loginParams = { username: this.account.username, password: this.account.pwd };
          var formData = new FormData();
          formData.append('username', this.account.username);
          formData.append('password', this.account.pwd);
          this.$http.post("/login", formData)
            .then((response) => {
              if (response.data.success == true) {
                this.$store.state.token = response.headers['x-auth-token'];
                this.$store.state.power = response.data.data.roleList[0].roleCode;
                sessionStorage.setItem('access-user', JSON.stringify(this.account.username));
                sessionStorage.setItem('token', response.headers['x-auth-token']);
                sessionStorage.setItem('power', response.data.data.roleList[0].roleCode);
                sessionStorage.setItem('staffId', response.data.data.staffId);
                sessionStorage.setItem('userName',response.data.data.staffName)
                sessionStorage.setItem('companyNo',response.data.data.companyNo)
                var flag = false
                $.each(that.allowedRoleList,function(index,value){
                  $.each(response.data.data.roleList,function(_index,_value){
                    if(value.roleCode==_value.roleCode){
                      flag = true
                    }
                  })
                })

                if(flag){
                  that.$router.push({ path: '/backgroundManaSys/accountManage' });
                }else{
                  that.$message('该账号没有权限登录')
                  that.$http.get('/logout');
                }
              } else {
                alert("Login Error");
              } 
            }).catch(function(response) {
              alert("Login Error");
              console.log(response)
            });
          this.logining = false;
        }

      });
    }
  }
}

</script>
<style>
body {
  background: #333333;
}

</style>
<style lang="scss" scoped>
.login-container {
  /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 160px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;

  background: -ms-linear-gradient(top, #fff, #6495ed);
  /* IE 10 */
  background: -moz-linear-gradient(top, #b8c4cb, #f6f6f8);
  /*火狐*/
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));
  /*谷歌*/
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#6495ed));
  /* Safari 4-5, Chrome 1-9*/
  background: -webkit-linear-gradient(top, #fff, #6495ed, #fff);
  /*Safari5.1 Chrome 10+*/
  background: -o-linear-gradient(top, #fff, #6495ed);
  /*Opera 11.10+*/
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .remember {
    margin: 0px 0px 35px 0px;
  }
}

</style>